<div class="row" *ngIf="mei">
    <div class="col-sm-8">
        <div class="row">
            <div class="col-sm-2">
                <img [src]="resourcesUrl + '/' + (mei.type == 'IdiosyncraticIssue' ? 999 : mei.externalId) + '_colored_large.png'"
                    class="img-responsive" />
            </div>
            <div class="col-sm-10">
                <h3 style="margin-bottom: 4px;">{{ mei.name }} <span *ngIf="mei.isMain" class="label key-issue-label">Key Issue</span></h3>
                <span class="font-size: 11pt;">Issue weight: <strong>{{ formatMeiWeight(mei.finalWeight).toFixed(2) }} %</strong></span>
            </div>
        </div>
    </div>
</div>

<div class="row" style="margin-top: 30px;">
    <div class="col-sm-12">
        <mei-rating-overview #ratingOverview [type]="type"></mei-rating-overview>
    </div>
</div>

<div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true" style="margin-top: 30px;">

    <div *ngIf="type === 'MaterialIssue'" class="panel panel-default">
        <hr/>
        <div class="panel-heading" role="tab" style="padding-left:0px;">
            <span class="panel-title header titleHeader">
                <a href="#collapseAnalyst" data-toggle="collapse"  class="accordion-toggle" style="text-decoration: none;">
                    <span *ngIf="mei && mei.isMain == true">Analyst View - {{mei.name}}</span>
            <span *ngIf="mei && !mei.isMain">Subindustry Narrative - {{mei.name}}</span>
            </a>
            </span>
        </div>
        <div id="collapseAnalyst" class="panel-collapse collapse in">
            <div class="panel-body">
                <mei-analyst-view #analystView></mei-analyst-view>
            </div>
        </div>
    </div>

    <div *ngIf="type !== 'IdiosyncraticIssue'" class="panel panel-default">
        <hr/>
        <div class="panel-heading" role="tab" style="padding-left:0px;">
            <span class="panel-title header titleHeader"><a href="#collapseSubindustry" data-toggle="collapse" class="accordion-toggle" style="text-decoration: none;">Subindustry Overview - {{subPeerGroup}}</a></span>
        </div>
        <div id="collapseSubindustry" class="panel-collapse collapse in">
            <div class="panel-body">
                <mei-subindustry-risk-rating #subIndustry></mei-subindustry-risk-rating>
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <hr/>
        <div class="panel-heading" role="tab" style="padding-left:0px;">
            <span class="panel-title header titleHeader">
                <a href="#collapseIndicators" data-toggle="collapse" class="accordion-toggle" style="text-decoration: none;">
                    <span *ngIf="type === 'BaselineIssue'">Corporate Governance Pillars</span>
            <span *ngIf="type !== 'BaselineIssue'">Management Indicators</span>
            </a>
            </span>
        </div>
        <div id="collapseIndicators" class="panel-collapse collapse in">
            <div class="panel-body">
                <mei-indicators #indicators></mei-indicators>
            </div>
        </div>
    </div>

</div>